<template>
  <div style="padding: 2% 3%;">


    <el-row>
      <el-button-group>
        <el-button type="info" :size='size' @click="addShow" :disabled="toggleShow">新增</el-button>
        <el-button type="info" :size='size' @click="editShow" :disabled="!toggleShow">修改</el-button>



      </el-button-group>
      <!-- 修改下拉框 -->
      <template v-if="!toggleShow">
        <el-select style="margin-left: 1.25rem;" @change="editChange" :size="size" v-model="value" placeholder="请选择二网公司名称">
          <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </template>
      <el-button :size="size" icon="el-icon-close" @click="qingkong" v-if="!toggleShow" circle></el-button>
    </el-row>
    <!-- 修改 -->
    <el-row v-if="!toggleShow">
      <el-divider></el-divider>
      <span v-if="!value">请选择二网公司名称</span>
      <!-- 根据下拉框是否有值 显示 -->
    <br />
      <div v-if="value">
        <el-form  ref="form1" :inline="true" :rules="rules" :model="form" label-width="120px">
          <div style="margin-top: 1.5rem;">
            <el-form-item label="二网公司名称" prop="name" >
              <el-input clearable style="width:100%;" v-model="form.name">
              </el-input>
            </el-form-item>
            <el-form-item label="区域" prop="area">
              <el-select v-model="form.area">
                <el-option v-for="item in area" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>

          <br />
          <div>
            <el-form-item label="签约日期:" prop="qianYueDate">
              <el-date-picker style="width: 90%;" v-model="form.qianYueDate" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="解约日期:" prop="jieYueDate">
              <el-date-picker style="width: 90%;" v-model="form.jieYueDate" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </div>
        </el-form>
        <el-divider></el-divider>
        <el-button type="primary" style="float: right;" :size='size' @click="save" >保存</el-button>
      </div>
    </el-row>


    <!-- 新增 -->
    <el-row v-if="toggleShow">
      <el-divider></el-divider>
      <!-- 改成行类表单  :inline="true"  -->
      <el-form ref="form1" :inline="true" :rules="rules" :model="form" label-width="120px">

        <!-- 用br换行 或者div  -->
        <br />
        <div style="margin-top: 1.5rem;">
          <el-form-item label="二网公司名称:" prop="name">
            <el-input v-model="form.name" style="width: 100%;" placeholder="请输入二网公司名称">
            </el-input>
          </el-form-item>
          <el-form-item label="区域:" prop="area">
            <el-select v-model="form.area">
              <el-option v-for="item in area" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>

        <br />
        <div>
          <el-form-item label="签约日期:" prop="qianYueDate">
            <el-date-picker style="width: 90%;" v-model="form.qianYueDate" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="解约日期:" prop="jieYueDate">
            <el-date-picker style="width: 90%;" v-model="form.jieYueDate" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </div>

      </el-form>
      <el-divider></el-divider>
      <el-button type="primary" style="float: right;" :size='size' @click="save">保存</el-button>
    </el-row>


    <!-- 修改 -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        size: 'medium',
        area: [{
            label: '城区',
            value: '城区'
          },
          {
            label: '城郊',
            value: '城郊'
          },
          {
            label: '区域外',
            value: '区域外'
          }
        ],
        //切换新增修改显示
        toggleShow: true,

        form: {
          name: '',
          area: '',
          qianYueDate: '',
          jieYueDate: ''
        },
        //修改下拉框的值
        options: {},
        //修改下拉框选择之后存的值
        value: '',
        rules: {
          name: [{
            required: true,
            message: '请输入二网公司名称',
            trigger: 'blur'
          }],
          area: [{
            required: true,
            message: '请选择区域',
            trigger: 'blur'
          }],
          qianYueDate: [{
            required: true,
            message: '请输入签约日期',
            trigger: 'blur'
          }],
          jieYueDate: [{
            required: true,
            message: '请输入解约日期',
            trigger: 'blur'
          }],
        }
      }
    },
    methods: {

      //切换v-if
      addShow() {
        console.log(this.form);
        this.toggleShow = true
        emptyObj(this.form)
        this.value = '';
      },
      editShow() {
        this.value = '';
        this.toggleShow = false
        emptyObj(this.form)
        this.editOptions();

      },

      //查找修改下拉框的值赋给options
      editOptions() {
        this.$ajax.post("twonetwork2/list", {}).then(res => {
          var result = res.data;
          if (result.success) {
            this.options = result.data
          }
        })
      },

      //保存
      save() {
     
        this.$refs.form1.validate(valid => {
          if (valid) {

            this.$ajax.post("twonetwork2/save", this.form).then(res => {
              var result = res.data;
              if (result.success) {
                this.$notify({
                  title: '提示',
                  message: '数据保存成功',
                  type: 'success',
                  position: 'bottom-right'
                });
                emptyObj(this.form)
                this.editOptions();
                this.value = '';
              }
            })

          }
        })
      },

      //选择下拉框
      editChange() {
        this.$ajax.post("twonetwork2/findbyId", {
          id: this.value
        }).then(res => {
          var result = res.data;
          if (result.success) {
            this.form = result.data;
               this.form.jieYueDate=new Date(this.form.jieYueDate);
                this.form.qianYueDate=new Date(this.form.qianYueDate);
                 this.$set(this.form,"name",result.data.twoNet.name)
                 this.$set(this.form,"id",result.data.twonetId)
          }
        })
      },

      //点击下拉框×
      //点击下拉框×
      qingkong() {
        this.value = '';
      },
      getNowTime() { //得到当天时间
       var now=this.form.jieYueDate
              var year = now.getFullYear(); //得到年份
        var month = now.getMonth(); //得到月份
        var date = now.getDate(); //得到日期
        var hour = now.getHours(); //得到小时
        var min = now.getMinutes(); //得到分钟
        var seconds = now.getSeconds(); //得到秒钟
        month = month + 1;
        month = month.toString().padStart(2, "0");
        date = date.toString().padStart(2, "0");
        var defaultDate = year + '-' + month + '-' + date + ' ' + hour + ':' + min + ':' + seconds;
        this.form.jieYueDate=defaultDate
              },



    }
  }



  function emptyObj(obj) {
    if (obj.file) {
      obj.file = ""
    }
    if (obj.jieYueDate) {
      obj.jieYueDate = ""
    }
    if (obj.qianYueDate) {
      obj.qianYueDate = ""
    }
    for (var key in obj) {
      var o = obj[key];
      if (o instanceof Object) {
        emptyObj(o);
      } else {
        obj[key] = '';
      }
    }
  }
</script>

<style>
</style>
